{% extends 'html5_base.html' %}

{% block title %}
Maze
{% endblock %}

{% block stylesheet %}
{{ block.super }}
{% endblock%}

{% block javascript %}
{{ block.super }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    var maze =	"";
    maze += "222 2222222222222222@";
    maze += "2 2 2222222222222222@";
    maze += "2 2 2222222222222222@";
    maze += "2 2           222222@";
    maze += "2 22222222222 222222@";
    maze += "2          22  22222@";
    maze += "2 22222222 222     2@";
    maze += "2 2222222222222222 2@";
    maze += "2 222222           2@";
    maze += "2  22222 22222222222@";
    maze += "22 22222 2       2 2@";
    maze += "22 22222 2 22222 2 2@";
    maze += "22       2 22    2 2@";
    maze += "22222222 2222 22 2 2@";
    maze += "22222222      22 2 2@";
    maze += "2222222222222222 2 2@";
    maze += "2222             2 2@";
    maze += "2222 222222 222222 2@";
    maze += "2222 222222        2@";
    maze += "     222222222222222@";

    var mazeGame = function(){}
    mazeGame.prototype = {
        start: function() {
            this.canvas = $("#canvas");
            this.startY = 360;
            this.startX = 80;
            this.currentX = 0;
            this.currentY =380;
            this.cwidth = 400;
            this.cheight = 400;
            this.blockSize = 20;
            this.meal = [];
            this.player = new Image();
            this.player.src = '{% url html5_static "image/key.gif"%}';
            this.mentoce = new Image();
            this.mentoce.src = '{% url html5_static "image/mentoce.jpg"%}';
            this.ctx = canvas.getContext("2d");
            this.display();
        },
        display: function() {
            this.BuildMap();
            this.popMeal(this.currentX, this.currentY);
            this.ctx.drawImage(this.player, this.currentX, this.currentY, this.blockSize, this.blockSize);
        },
        BuildMap: function() {
            this.ctx.clearRect(0, 0, this.cwidth, this.cheight);
            var y = 0;
            var x = 0;
            for (var i=0; i<maze.length; i++) {
                if (maze.charAt(i) == "@") {
                    y += this.blockSize;
                    x = 0;
                    i += 1;
                }
                this.drawBlock(i, x, y);

                if (maze.charAt(i) == " ") {
                    this.ctx.drawImage(this.mentoce, x, y, this.blockSize, this.blockSize);
                    this.meal.push({"x":x, "y": y});
                }
                x += this.blockSize;
            }
        },
        drawBlock: function(i, x, y) {
            var c = maze.charAt(i);
            if (c == "2") {
                this.ctx.fillStyle = "#000";
                this.ctx.fillRect(x, y, this.blockSize, this.blockSize);
            }
        },
        displayCandyWay: function() {
            if(this.meal.length == 0) {
                alert("You won");
                return;
            }
            var p = null;
            for (var i=0; i<this.meal.length; i++) {
                p = this.meal[i];
                this.ctx.drawImage(this.mentoce, p["x"], p["y"], this.blockSize, this.blockSize);
            }
        },
        displayPlayer: function(x, y) {
            // Block
            if (this.getSymbol(x, y) == "2") {
                return;
            }
            if (this.getSymbol(x, y) == " ") {
                // delete previous player
                this.ctx.clearRect(this.currentX, this.currentY, this.blockSize, this.blockSize);

                if (x > this.cwidth - this.blockSize) {
                    x = this.cwidth - this.blockSize;
                    this.currentX = x;
                } else if (x < 0) {
                    this.currentX = 0;
                } else {
                    this.currentX = x;
                }

                if (y > this.cheight - this.blockSize) {
                    y = this.cheight - this.blockSize;
                    this.currentY = y;
                } else if  (y < 0) {
                    this.currentY = 0;
                } else {
                    this.currentY = y;
                }

                this.popMeal(this.currentX, this.currentY);

                this.ctx.drawImage(this.player, this.currentX, this.currentY, this.blockSize, this.blockSize);
            }
        },
        popMeal: function(x, y) {
            var p = {'x': x, 'y':y};
            var n = this.meal;
            for (var i=0; i<n.length; i++) {
                if (p["x"] == n[i]["x"] && p["y"] == n[i]["y"]) {
                    this.meal.splice(i, 1);
                    break;
                }
            }
        },
        getSymbol: function(x, y) {
            return maze.split("@")[y / this.blockSize].charAt(x / this.blockSize)
        }
    }

    var m = new mazeGame();
    m.start();

    document.onkeydown = function (event) {
        var keyCode;
        var x = 0;
        var y = 0;
        if (event == null) {
            keyCode = window.event.keyCode;
        }
        else {
            keyCode = event.keyCode;
        }
        switch (keyCode) {
            // left
            case 37:
                x = m.currentX - m.blockSize;
                y = m.currentY;
                m.displayPlayer(m.currentX - m.blockSize, m.currentY);
                m.displayCandyWay();
                break;
            // up
            case 38:
                x = m.currentX;
                y = m.currentY - m.blockSize;
                m.displayPlayer(x, y);
                m.displayCandyWay();
                break;
            // right
            case 39:
                x = m.currentX + m.blockSize;
                y = m.currentY;
                m.displayPlayer(x, y);
                m.displayCandyWay();
                break;
            // down
            case 40:
                x = m.currentX;
                y = m.currentY + m.blockSize;
                m.displayPlayer(x, y);
                m.displayCandyWay();
                break;
            default:
                break;
        }
    }
});
</script>
{% endblock%}

{% block content %}
<canvas id="canvas" height="400" width="400"></canvas>
{% endblock %}